<!-- 注意这里不需要写`<html><body>`这些东西，它是一个html片段，不是完整的html页面 -->
<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form model-form">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required" style="width: 100px">标题</label>
        <div class="layui-input-block" style="margin-left: 130px">
            <input name="name" class="layui-input" placeholder="标题" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required" style="width: 100px">排序</label>
        <div class="layui-input-block" style="margin-left: 130px">
            <input name="num" class="layui-input" placeholder="排序" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required" style="width: 100px">图片</label>
        <div class="layui-input-block" style="margin-left: 130px">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <br/>
            <img class="layui-upload-img" id="demo1" height="100px" width="100px" style="margin-top: 30px">
            <input id="imagefile" type="hidden" class="layui-input" name="imageurl"/>
            <p id="demoText"></p>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required" style="width: 100px">跳转地址</label>
        <div class="layui-input-block" style="margin-left: 130px">
            <input name="url" class="layui-input" placeholder="请输入跳转URL" lay-verType="tips" lay-verify="required"
                   required/>
        </div>
    </div>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var xmSelect = layui.xmSelect;
        var upload = layui.upload;
        var remoteDataRenderIns = {};
        var editData = admin.getLayerData('#addOrUpdateForm').data;
        if (editData !== null && editData !== undefined) {
            console.log(editData)
            $('#demo1').attr('src', editData.imageurl);
            form.val('addOrUpdateForm', editData);
        }

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/sysFileInfo/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log(res);
                //如果上传失败
                if (res.code == 200) {
                    // var imgurl ='http://zyfirst.cn:8088/file/'+res.file.fileObjectName;
                    var imgurl =res.data;
                    console.log(imgurl);
                    //   imagefile
                    document.getElementById("imagefile").value = imgurl;
                    //上传成功
                    return layer.msg('上传成功');
                } else {
                    return layer.msg('上传失败');
                }

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        // 表单提交事件
        form.on('submit(formSubmitBtn)', function (data) {
            layer.load(2);
            var url = editData ? 'wiki/edit' : 'wiki/add';
            admin.req(url, JSON.stringify(data.field), function (res) {
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                    admin.putLayerData('formOk', true, '#addOrUpdateForm');
                    admin.closeDialog('#addOrUpdateForm');
                });
            }, 'post');
            return false;
        });
    });
</script>